<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./d3.v5.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <hr>
  <button id="btn_update">update</button>

  <script>
    const svg_width = 600;
    const svg_height = 400;
    const svg_padding = 50;
    //生成颜色
    var colors = d3.schemeCategory10.concat(d3.schemeCategory10);
    var dataset = [];

    //生成随机数据
    function createData() {
      dataset = []
      var rs = [];
      for (var i = 0; i < 20; i++) {
        var num1 = Math.round(Math.random() * 400);
        var num2 = Math.round(Math.random() * 400);
        dataset.push([num1, num2]);
      }
    }
    createData();

    //创建画布
    var svg = d3.select("#app").append('svg')
      .attr('width', svg_width)
      .attr('height', svg_height)
      .style('background', '#efefef');


    //创建x轴线性比例尺
    var x_scale = d3.scaleLinear()
      .domain([0, d3.max(dataset, (d) => {
        return d[0]
      })])
      .range([svg_padding, svg_width - svg_padding * 2]);
    //在x轴添加比例尺
    var x_axis = d3.axisBottom(x_scale);
    svg.append('g').call(x_axis)
      .attr('transform', 'translate(0,' + (svg_height - svg_padding) + ')')

    //创建y轴线性比列尺
    var y_scale = d3.scaleLinear()
      .domain([0, d3.max(dataset, (d) => {
        return d[1]
      })])
      .range([svg_height - svg_padding * 2, 0]);

    var y_axis = d3.axisLeft(y_scale).ticks(5);
    svg.append('g').call(y_axis)
      .attr('transform', 'translate(' + svg_padding + ',' + svg_padding + ')')


    //添加圆形散点
    function addCircle() {
      svg.append('g')
        .attr('clip-path', 'url(#clip-area-path)')
        .selectAll('circle').data(dataset)
        .enter()
        .append('circle');


      svg.selectAll('circle').data(dataset)
        .attr('r', 10)
        .attr('cx', (d) => {
          return x_scale(d[0]);
        })
        .attr('cy', (d) => {
          return y_scale(d[1]);
        })
        .attr('fill', (d, i) => {
          return colors[i];
        })
        .on('click', (d) => {
          alert('数据：' + d);
        })
    }

    //创建裁切路径
    function createClippath() {
      svg.append('clipPath')
        .attr('id', 'clip-area-path')
        .append('rect')
        .attr('x', svg_padding)
        .attr('y', svg_padding)
        .attr('width', svg_width - svg_padding * 2)
        .attr('height', svg_height - svg_padding * 2)
    }

    //更新数据
    d3.select("#btn_update").on('click', function () {
      createData();
      d3.selectAll('circle')
        .data(dataset)
        .transition()
        .duration(500)
        .attr('cx', (d) => {
          return x_scale(d[0]);
        })
        .attr('cy', (d) => {
          return y_scale(d[1]);
        })
        .attr('fill', (d, i) => {
          return colors[i];
        })

    })

    createClippath();
    addCircle();




  </script>

</body>

</html>